<template>
  <div class="home-wrap">
    <h2>欢迎进入智慧课程平台</h2>

    <!-- 当前用户的收藏夹模块 -->
    <div class="favorites-section">
      <h3 class="favorites-title">我的收藏夹</h3>
      <div class="folder">
        <h4 class="folder-title">收藏夹</h4>
        <div class="files-container">
          <div
            class="file-item"
            v-for="(note, noteIndex) in favoriteFolder.notes"
            :key="noteIndex"
          >
            <h4 class="note-title">{{ note.title }}</h4>
            <p class="note-content">{{ note.content }}</p>
            <p class="note-file-id">文件ID: {{ note.id }}</p>
            <button @click="openFile(note)" class="open-file-btn">打开文件</button>
            <button @click="removeNote(noteIndex)" class="remove-btn">移除</button>
            <button @click="downloadFile(note.id)" class="download-btn">下载</button>
          </div>
          <div class="no-files" v-if="favoriteFolder.notes.length === 0">没有文件</div>
        </div>

        <!-- 新增点赞部分 -->
        <div class="like-section">
          <span class="likes-count">点赞数: {{ favoriteFolder.likes }}</span>
          <span
            class="like-heart"
            :class="{ liked: isLiked }"
            @click="likeFolder"
          ></span>
        </div>

        <input
          type="file"
          @change="handleFileSelect($event)"
          class="file-input"
          accept=".txt,.doc,.pdf"
        />
        <button @click="addFile" class="add-file-btn">添加文件</button>
        <div class="toggle-public-section">
          <label for="isPublicCheckbox">公开收藏夹</label>
          <input type="checkbox" id="isPublicCheckbox" v-model="favoriteFolder.isPublic" @change="togglePublic" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: "Home",
  data() {
    return {
      baseURL: "http://localhost:8085", // 封装基础URL
      searchUserId: '', // 存储搜索的用户ID
      searchedUserId: '', // 被搜索到的用户ID
      searchedUserFavorites: null, // 被搜索到的用户收藏夹
      favoriteFolder: { // 当前用户的收藏夹，增加是否公开属性
        name: '我的收藏夹',
        notes: [], // 当前用户的收藏夹内容
        isPublic: false, // 默认不公开
        likes: 0 // 新增点赞数量
      },
      isLiked: false, // 是否已经点赞
      selectedFile: null, // 存储用户选择的文件
      selectedFileName: '', // 存储文件名
      notifications: [ // 用户通知
        '您有一个新课程更新。',
        '请注意，您的作业截止日期已更改。',
        '系统维护将在本周末进行。'
      ]
    };
  },
  methods: {
    // 切换收藏夹是否公开
    togglePublic() {
      const userId = this.$store.state.status.userId;
      const isPublic = !!this.favoriteFolder.isPublic;  // 使用双重否定确保是布尔值

      axios.put(`${this.baseURL}/favourites/visibility`, null, {
        params: {
          userId: userId,
          isPublic: isPublic  // 确保这是布尔值 true 或 false
        },
        headers: {
          'Content-Type': 'application/json'
        }
      })
      .catch(error => {
        console.error('更新收藏夹公开状态失败', error);
      });
    },

    // 点赞收藏夹
    likeFolder() {
      const userId = this.$store.state.status.userId;

      // 切换点赞状态
      this.isLiked = !this.isLiked;
      if (this.isLiked) {
        this.favoriteFolder.likes++; // 本地增加点赞数
      } else {
        this.favoriteFolder.likes--; // 取消点赞
      }

      axios.post(`${this.baseURL}/favourites/like`, {
        userId: userId,
        folderId: this.favoriteFolder.id // 假设有folderId
      })
      .catch(error => {
        console.error('点赞失败', error);
      });
    },

    // 其他方法保持不变...
  },
  mounted() {
    // 组件加载时获取用户的收藏夹
    this.fetchUserFavorites();
  }
};
</script>

<style scoped>
.home-wrap {
  height: 100%;
  width: 100%;
}

.search-section {
  margin-top: 20px;
  margin-bottom: 20px;
}

.search-input {
  padding: 5px;
  width: 200px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.search-btn {
  padding: 5px 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 10px;
}

.favorites-section {
  margin-top: 20px;
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.favorites-title {
  font-size: 20px;
  color: #333;
  margin-bottom: 10px;
}

.folder {
  margin: 10px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.folder-title {
  font-size: 18px;
  color: #333;
}

.files-container {
  max-height: 200px; /* 限制文件区高度 */
  overflow-y: auto;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
}

.file-item {
  border-bottom: 1px solid #eee;
  padding: 5px 0;
}

.note-title {
  font-size: 16px;
  color: #555;
  margin: 0;
}

.note-content {
  font-size: 14px;
  color: #777;
  margin: 5px 0;
}

.note-file-id {
  font-size: 12px;
  color: #888;
  margin: 5px 0;
}

.open-file-btn,
.remove-btn,
.add-file-btn,
.download-btn {
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
  margin-top: 5px;
}

.open-file-btn:hover,
.remove-btn:hover,
.add-file-btn:hover,
.download-btn:hover {
  background-color: #d32f2f;
}

.no-files,
.no-notifications {
  font-size: 14px;
  color: #999;
  text-align: center;
  margin-top: 10px;
}

.file-input {
  margin-top: 10px;
}

.add-file-btn {
  margin-top: 5px;
  background-color: #4CAF50;
}

.add-file-btn:hover {
  background-color: #388E3C;
}

/* 是否公开切换 */
.toggle-public-section {
  margin-top: 10px;
}

.notifications-section {
  margin-top: 20px;
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.notifications-title {
  font-size: 20px;
  color: #333;
  margin-bottom: 10px;
}

.notification {
  padding: 5px;
  border-bottom: 1px solid #eee;
}

.notification-message {
  font-size: 14px;
  color: #555;
}

/* 新增点赞爱心部分 */
.like-section {
  margin-top: 10px;
  display: flex;
  align-items: center;
}

.likes-count {
  font-size: 14px;
  color: #555;
  margin-right: 10px;
}

.like-heart {
  width: 24px;
  height: 24px;
  background-color: transparent;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s;
}

.like-heart:before,
.like-heart:after {
  content: '';
  width: 24px;
  height: 24px;
  position: absolute;
  top: 0;
  left: 12px;
  border-radius: 12px 12px 0 0;
  background-color: #888;
  transform: rotate(-45deg);
}

.like-heart:after {
  left: 0;
  transform: rotate(45deg);
}

.liked {
  background-color: red;
}

.liked:before,
.liked:after {
  background-color: red;
}

.like-heart:hover {
  transform: scale(1.2);
}
</style>
